﻿<Page
    x:Name="pageRoot"
    x:Class="Wimm.UI.IncomePage"
    xmlns:CC="using:Wimm.CustomContols"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Wimm.UI"
    xmlns:common="using:Wimm.UI.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Charting="using:DataVirtualization.Toolkit.Charting"
    xmlns:conv="using:Wimm.UI.Converters"
    mc:Ignorable="d">

    <Page.Resources>
        <!--<x:String x:Key="ChevronGlyph">&#xE26B;</x:String>

        --><!-- TODO: Delete this line if the key AppName is declared in App.xaml --><!--
        <x:String x:Key="AppName">My Application</x:String>-->
        <conv:StringFormatConverter x:Key="StringFormatConverter"/>
        <conv:LongToDateConverter x:Key="LongToDateConverter"/>
        <conv:StringToVisibilityConverter x:Key="StringToVisibilityConverter"/>

        <DataTemplate x:Key="IncomeGridHeaderTemplate" >
            <Grid Background="DarkGray" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="30"/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="150"/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" TextWrapping="Wrap" Text="Id" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="15,2,0,0" />
                <TextBlock Grid.Column="1" TextWrapping="Wrap" Text="Image" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="15,2,0,0" />
                <TextBlock Grid.Column="2" TextWrapping="Wrap" Text="Time" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="15,2,0,0"/>
                <TextBlock Grid.Column="3" TextWrapping="Wrap" Text="Amount" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10,2,0,0"  />
                <TextBlock Grid.Column="4" TextWrapping="Wrap" Text="Comment" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="15,2,0,0"  />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="SmallIncomeGridHeaderTemplate" >
            <Grid Background="DarkGray" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="30"/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="150"/>
                    <ColumnDefinition Width="70"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" TextWrapping="Wrap" Text="Id" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" />
                <TextBlock Grid.Column="1" TextWrapping="Wrap" Text="Image" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" />
                <TextBlock Grid.Column="2" TextWrapping="Wrap" Text="Time" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0"/>
                <TextBlock Grid.Column="3" TextWrapping="Wrap" Text="Amount" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0"  />
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="IncomeGridItemsTemplate">
            <Grid d:DesignHeight="50" Margin="0,5,0,0" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="30"/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="150"/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock  Grid.Column="0" HorizontalAlignment="Left" Text="{Binding Id}" VerticalAlignment="Center" Margin="5,0,0,0"/>
                <Image Grid.Column="1" VerticalAlignment="Center" Source="{Binding Icon.FileName,Converter={StaticResource StringFormatConverter},ConverterParameter='Assets/icon/{0}'}" Width="32" Height="32"></Image>
                <TextBlock Grid.Column="2" HorizontalAlignment="Left" Text="{Binding Time, Converter={StaticResource LongToDateConverter},ConverterParameter='dd MMMM'}" VerticalAlignment="Center" Margin="5,0,0,0"/>
                <TextBlock Grid.Column="3" HorizontalAlignment="Left" VerticalAlignment="Center" Text="{Binding AmountInDollars,Converter={StaticResource StringFormatConverter},ConverterParameter='\{0:C2\}'}"/>
                <StackPanel Grid.Column="4" Orientation="Horizontal" >
                    <TextBlock VerticalAlignment="Center"  Margin="15,0,0,0"
                               Visibility="{Binding Comment, Converter={StaticResource StringToVisibilityConverter},ConverterParameter=true}"
                               Text="{Binding Comment, Mode=OneTime}" />
                    <Button Content="Comment" VerticalAlignment="Center"  Margin="15,0,0,0"
                            Visibility="{Binding Comment, Converter={StaticResource StringToVisibilityConverter}}">
                        <Button.Flyout>
                            <Flyout>
                                <StackPanel>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="Comment" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0 0 5 0"/>
                                        <TextBox Text="{Binding Path=Comment, Mode=TwoWay}" />
                                    </StackPanel>
                                    <AppBarButton Icon="Add" Margin="0 10 0 0"
                                        Command="{Binding Path=Command}" />
                                </StackPanel>
                            </Flyout>
                        </Button.Flyout>
                    </Button>
                </StackPanel>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="SmallIncomeGridItemsTemplate">
            <Grid d:DesignHeight="50" Margin="0,5,0,0" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="30"/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="150"/>
                    <ColumnDefinition Width="70"/>
                </Grid.ColumnDefinitions>
                <TextBlock  Grid.Column="0" HorizontalAlignment="Left" Text="{Binding Id}" VerticalAlignment="Center" Margin="5,0,0,0"/>
                <Image Grid.Column="1" VerticalAlignment="Center" Source="{Binding Icon.FileName,Converter={StaticResource StringFormatConverter},ConverterParameter='Assets/icon/iconIncame/{0}'}" Width="32" Height="32"></Image>
                <TextBlock Grid.Column="2" HorizontalAlignment="Left" Text="{Binding Time, Converter={StaticResource LongToDateConverter},ConverterParameter='dd MMMM'}" VerticalAlignment="Center" Margin="5,0,0,0"/>
                <TextBlock Grid.Column="3" HorizontalAlignment="Left" VerticalAlignment="Center" Text="{Binding Amount,Converter={StaticResource StringFormatConverter},ConverterParameter='\{0:C2\}'}"/>
            </Grid>
        </DataTemplate>

        <CC:DataGridTemplateSelector x:Key="DataGridTemplateSelector"
             ItemTemplate="{StaticResource SmallIncomeGridItemsTemplate}"
             HeaderTemplate="{StaticResource SmallIncomeGridHeaderTemplate}"
             SmallItemTemplate="{StaticResource SmallIncomeGridItemsTemplate}"
             SmallHeaderTemplate="{StaticResource SmallIncomeGridHeaderTemplate}"
        />
    </Page.Resources>

    <Grid  Background="#00a2e8" >
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid Background="#00a2e8" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="BackButton" Margin="39,59,39,0" Click="BackButton_Click"
                        Style="{StaticResource NavigationBackButtonNormalStyle}"
                        VerticalAlignment="Top"
                        AutomationProperties.Name="Back"
                        AutomationProperties.AutomationId="BackButton"
                        AutomationProperties.ItemType="Navigation Button"/>
            <TextBlock x:Name="PageTitle" x:Uid="Section3Header.Text" Text="Income" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                        IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
        </Grid>
        <Grid Grid.Row="1" x:Name="expenseGridLayout" Margin="39,0,39,59" HorizontalAlignment="Stretch" Background="#00a2e8" >
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3*"/>
                <ColumnDefinition Width="2*"/>
            </Grid.ColumnDefinitions>
            <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" Grid.Row="0" Grid.ColumnSpan="2" Margin="0 25 0 25">
                <StackPanel Orientation="Horizontal" Margin="0 0 0 20">
                    <TextBlock VerticalAlignment="Center" Margin="0 0 20 0" Style="{StaticResource SubheaderTextBlockStyle}">Period</TextBlock>
                    <ComboBox VerticalAlignment="Center" ItemsSource="{Binding Path=TimePeriods,Mode=OneTime}" SelectedItem="{Binding Path=SelectedTimePeriod,Mode=TwoWay}">
                        <ComboBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Name}"/>
                            </DataTemplate>
                        </ComboBox.ItemTemplate>
                    </ComboBox>
                    <TextBlock VerticalAlignment="Center" Margin="20 0 20 0" Style="{StaticResource SubheaderTextBlockStyle}">From</TextBlock>
                    <DatePicker VerticalAlignment="Center" Date="{Binding Path=ExpensesFromFilter,Mode=TwoWay}" DayFormat="{}{day.integer} ({dayofweek.abbreviated})"></DatePicker>
                    <TextBlock VerticalAlignment="Center" Margin="20 0 20 0" Style="{StaticResource SubheaderTextBlockStyle}">To</TextBlock>
                    <DatePicker VerticalAlignment="Center" Date="{Binding Path=ExpensesToFilter,Mode=TwoWay}" DayFormat="{}{day.integer} ({dayofweek.abbreviated})" ></DatePicker>
                    <AppBarButton VerticalAlignment="Center" Icon="Accept" IsCompact="True" x:Name="Apply" Click="Apply_Click"></AppBarButton>
                </StackPanel>
            </ScrollViewer>
            <StackPanel Grid.Row="1" Grid.ColumnSpan="2" Orientation="Horizontal">
                <TextBlock Style="{StaticResource HeaderTextBlockStyle}" Text="Income" Margin="0 0 10 0"/>
                <AppBarButton IsCompact="True" Icon="Add" Click="AddIncome_Click"></AppBarButton>
            </StackPanel>
            <Border Grid.Column="0" Grid.Row="2" BorderThickness="4" BorderBrush="Red">
                <CC:IncomeDataGrid PagedGridData="{Binding IncomeLoader}"
                                   ItemTemplateSelector="{StaticResource DataGridTemplateSelector}">
                </CC:IncomeDataGrid>
            </Border>
            <Border Grid.Column="1" Grid.Row="2" BorderThickness="4" BorderBrush="Green">
                <Grid  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Charting:PieChart Height="300" Width="300" x:Name="chart" ItemsSource="{Binding DiagramSource}" HorizontalAlignment="Stretch"  VerticalAlignment="Stretch"/>
                </Grid>
            </Border>
        </Grid>
    </Grid>
</Page>
